<template>
    <div class="father">
    <div class="son1">
      <p class="p1" @click="ymonthbtn" :class="{fsize:ymonth}">{{gettime}}月</p>
      <p class="p2" @click="monthsbtn" :class="{fsize:months}">{{gettime1}}月</p>
      <p class="p3" @click="tmonthbtn" :class="{fsize:tmonth}">{{gettime2}}月</p>
    </div>
      <div class="son2">
        <div class="mar"><span>{{shownum}}</span>分<p>平均得分</p></div>
   <ve-line :data="chartData" :settings="chartSettings"></ve-line>
  </div>   
</div>
</template>

<script>
export default {
  data () {
      this.chartSettings = {
        axisSite: { right: ['score','均匀率', '压感'] },
        // yAxisType: ['', 'percent'],
        // yAxisName: ['数值', '比率']
       yAxis: {
        name: 'y',
        min: -100,
        max: 100,
        minorTick: {
            show: true
        },
        splitLine: {
            lineStyle: {
                color: '#999'
            }
        },
        minorSplitLine: {
            show: true,
            lineStyle: {
                color: '#ddd'
            }
        },
    },
      }
      return {
        chartData: {
          columns: ['date', 'score', '均匀率', '压感'],
          rows: []
        },
      ymonth:false,
      months:true,
      tmonth:false
      }
    },
    mounted () {
       this.$http.get('/api/s/month').then(({
                    data,
                    config
                }) =>{
                    //解构语法
                    console.log(data);
                    this.chartData.rows=data.data
                }) 
    },
  methods: {
    ymonthbtn:function(){
       this.$http.get('/api/y/ymonth').then(({
                    data,
                    config
                }) =>{
                    //解构语法
                    console.log(data);
                    this.chartData.rows=data.data
                }) 
      this.ymonth=true;
      this.months=false;
      this.tmonth=false;
    },
    monthsbtn:function(){
        this.$http.get('/api/s/month').then(({
                    data,
                    config
                }) =>{
                    //解构语法
                    console.log(data);
                    this.chartData.rows=data.data
                }) 
      this.ymonth=false;
      this.months=true;
      this.tmonth=false;
    },
    tmonthbtn:function(){
      this.$http.get('/api/t/tmonth').then(({
                    data,
                    config
                }) =>{
                    //解构语法
                    console.log(data);
                    this.chartData.rows=data.data
                }) 
      this.ymonth=false;
      this.months=false;
      this.tmonth=true;
    }
  },
    computed: {
       shownum:function(){
            let shown=0;
            for(let i = 0;i<this.chartData.rows.length;i++){
               shown+=parseInt(this.chartData.rows[i].score);
            }
            return parseInt(shown/this.chartData.rows.length);
        },  
    gettime:function(){
       let date = new Date();
    return  date.getMonth();
    },
    gettime1:function(){
       let date = new Date();
    return  (date.getMonth() + 1);
    },
     gettime2:function(){
       let date = new Date();
    return  (date.getMonth() + 2);
    },
},
}
</script>

<style scoped>
.father{
  position: relative;
}
.son1{
  position: absolute;
  width: 90%;
  margin-left: 5%;
  margin-top: -3rem;
  margin-left: 1rem;
  line-height: 0.3rem;
  text-align: center;
  color:white;
}
.son2{
  position: absolute;
  width: 90%;
  margin-left: 5%;
  height: 13.5rem;
  text-align: center;
  /* line-height: 500px; */
  border:1px solid red;
  top: 0.1rem;
  border-radius:1rem;
  margin-top: -2rem;
  background-color:white;
}
img{
  width: 100px;
  margin-top: 6rem;
}
.p1{
float: left;
}
.p2{
  display: inline-block;
}
.p3{
    float: right;
    margin-right: 0.5rem;
}
.fsize{
  font-size: 0.5rem;
}
.mar{
    text-align: center;
    line-height: 3rem;
}
span{
    font-size: 1rem;
}
.mar>p{
    margin-top: -2.5rem;
}
.line{
    margin-top: 1rem;
}
</style>